<template>
  <div class="app-container">

    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.checktime"
        type="daterange"
        range-separator="至"
        class="filter-item"
        style="width:300px"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <el-cascader :options="city" class="filter-item w-200" clearable :props="{checkStrictly: true }"
                   v-model="listQuery.cityId" filterable ref="tree" @change="cityChange"
      ></el-cascader>
      <el-button-group class="filter-item">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search"
        >
          搜索
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="refresh"
        >
          重置
        </el-button>


      </el-button-group>

    </div>
    <div style="display: flex">
      <el-radio-group v-model="listQuery.filterType">
        <el-radio-button label="0">总表</el-radio-button>
        <el-radio-button label="1">一级热点</el-radio-button>
        <el-radio-button label="2">二级热点</el-radio-button>
      </el-radio-group>
      <el-button
        type="primary"
        icon="el-icon-paperclip"
        @click="explortExcel"
        style="margin-left:40px"
      >
        导出
      </el-button>
    </div>
    <div class="lingyuData">

      <div v-if="listQuery.filterType==0"
           v-loading="listLoading"
           element-loading-text="Loading"
           style="min-height: 500px;"
      >
        <el-table
          v-if="tableData.length>0"
          :data="tableData"
          :header-row-class-name="Tableheader"
          v-loading="listLoading"
          element-loading-text="Loading"
          :span-method="objectSpanMethod"
          :default-sort = "{prop: 'fupcount', order: 'descending'}"
          border
          id="table"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column>
            <template slot="header" slot-scope="scope">
              <div style="font-weight: bold;font-size:20px;padding:5px 0;text-align:center;">{{checkCitys}}{{ listQuery.checktime[0] }} - {{ listQuery.checktime[1] }}领域全域数据</div>
            </template>
            <el-table-column
              fixed
              label="一级分类"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div style="font-weight: bold !important;color:#444;font-size:14px;">{{ scope.row.fupname }}</div>
              </template>
            </el-table-column>
            <el-table-column
              fixed
              label="留言合计"
              prop="fupcount"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <div style="color:orange;font-weight: bold">{{ scope.row.fupcount }}</div>
              </template>
            </el-table-column>
            <el-table-column
              fixed
              label="留言占比"
              width="140"


              align="center"
            >
              <template slot-scope="scope">
                <div style="color:orange;font-weight: bold">{{ scope.row.fupzhanbi }}%</div>
              </template>
            </el-table-column>
            <el-table-column
              fixed
              label="二级分类"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="留言数据"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div style="color:orange;font-weight: bold">{{ scope.row.count }}</div>
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="咨询量"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[1] > 0 ? scope.row.type[1] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="建言"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[2] > 0 ? scope.row.type[2] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="投诉"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[3] > 0 ? scope.row.type[3] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="求助"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[4] > 0 ? scope.row.type[4] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="感谢"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[5] > 0 ? scope.row.type[5] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="不满意数"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.bmy }}
              </template>
            </el-table-column>


          </el-table-column>
        </el-table>
      </div>
      <div v-if="listQuery.filterType==1"
           v-loading="listLoading"
           element-loading-text="Loading"
           style="min-height: 500px;"
      >
        <el-table
          v-if="tableData.length>0"
          :data="tableData"
          :header-row-class-name="Tableheader"
          id="table"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column>
            <template slot="header" slot-scope="scope">
              <div style="font-weight: bold;font-size:20px;padding:5px 0;text-align:center;">{{checkCitys}}{{ listQuery.checktime[0] }} - {{ listQuery.checktime[1] }}一级领域排行榜</div>
            </template>
            <el-table-column
              fixed
              label="分类"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div style="font-weight: bold !important;color:#444;font-size:14px;">{{ scope.row.name }}</div>
              </template>
            </el-table-column>
            <el-table-column
              fixed
              label="留言数"
              prop="fupcount"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div style="color:orange;font-weight: bold">{{ scope.row.count }}</div>
              </template>
            </el-table-column>
            <el-table-column
              fixed
              label="留言同比"
              width="150"

              align="center"
            >
              <template slot-scope="scope">
                <div style="font-weight: bold;color:green" v-if="scope.row.oldzhanbi>=0">{{ scope.row.oldzhanbi }}%（{{ scope.row.oldCount}}）</div>
                <div style="font-weight: bold;color:red" v-else-if="scope.row.oldzhanbi<0">{{ scope.row.oldzhanbi }}%（{{ scope.row.oldCount}}）</div>
              </template>
            </el-table-column>
            <el-table-column
              fixed
              label="留言占比"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                <div style="color:orange;font-weight: bold">{{ scope.row.fupzhanbi }}%</div>
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="留言占比同比"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                <div style="font-weight: bold;color:green" v-if="scope.row.upDatazhanbi>=0">{{ scope.row.upDatazhanbi }}%</div>
                <div style="font-weight: bold;color:red" v-else-if="scope.row.upDatazhanbi<0">{{ scope.row.upDatazhanbi }}%</div>
              </template>
            </el-table-column>


            <el-table-column
              fixed
              label="咨询量"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[1] > 0 ? scope.row.type[1] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="建言"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[2] > 0 ? scope.row.type[2] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="投诉"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[3] > 0 ? scope.row.type[3] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="求助"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[4] > 0 ? scope.row.type[4] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="感谢"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[5] > 0 ? scope.row.type[5] : 0 }}
              </template>
            </el-table-column>
            <el-table-column
              fixed
              label="不满意数"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.bmy }}
              </template>
            </el-table-column>
          </el-table-column>

        </el-table>
      </div>
      <div v-if="listQuery.filterType==2"
           v-loading="listLoading"
           element-loading-text="Loading"
           style="min-height: 500px;"
      >
        <el-table
          v-if="tableData.length>0"
          :data="tableData"
          :header-row-class-name="Tableheader"
          id="table"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column>
            <template slot="header" slot-scope="scope">
              <div style="font-weight: bold;font-size:20px;padding:5px 0;text-align:center;">{{checkCitys}}{{ listQuery.checktime[0] }} - {{ listQuery.checktime[1] }}二级领域排行榜</div>
            </template>
            <el-table-column
              fixed
              label="分类"
              width="250"
              align="center"
            >
              <template slot-scope="scope">
                <div style="font-weight: bold !important;color:#444;font-size:14px;">{{ scope.row.name }}</div>
              </template>
            </el-table-column>
            <el-table-column
              fixed
              label="留言数"
              prop="fupcount"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div style="color:orange;font-weight: bold">{{ scope.row.count }}</div>
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="留言同比"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div style="font-weight: bold;color:green" v-if="scope.row.oldzhanbi>=0">{{ scope.row.oldzhanbi }}%（{{ scope.row.oldCount}}）</div>
                <div style="font-weight: bold;color:red" v-else-if="scope.row.oldzhanbi<0">{{ scope.row.oldzhanbi }}%（{{ scope.row.oldCount}}）</div>
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="留言占比"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div style="color:orange;font-weight: bold">{{ scope.row.fupzhanbi }}%</div>
              </template>
            </el-table-column>
            <el-table-column
              fixed
              label="留言占比同比"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                <div style="font-weight: bold;color:green" v-if="scope.row.upDatazhanbi>=0">{{ scope.row.upDatazhanbi }}%</div>
                <div style="font-weight: bold;color:red" v-else-if="scope.row.upDatazhanbi<0">{{ scope.row.upDatazhanbi }}%</div>
              </template>
            </el-table-column>


            <el-table-column
              fixed
              label="咨询量"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[1] > 0 ? scope.row.type[1] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="建言"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[2] > 0 ? scope.row.type[2] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="投诉"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[3] > 0 ? scope.row.type[3] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="求助"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[4] > 0 ? scope.row.type[4] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="感谢"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type[5] > 0 ? scope.row.type[5] : 0 }}
              </template>
            </el-table-column>

            <el-table-column
              fixed
              label="不满意数"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.bmy }}
              </template>
            </el-table-column>
          </el-table-column>

        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import exportExecl from '@/utils/excel'
import { getLingyuData } from '@/api/rank'
import { getCity } from '@/api/user'
import { getMergeCells } from '@/utils/tableMerge.js'

let id = 0
export default {
  data() {
    return {
      total: 0,
      list: [],
      tableData: [],
      drawer: true,
      rankData: [],
      countTypeData: [],
      listLoading: false,
      listQuery: {
        checktime: [new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('fr-CA'), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0, 23, 59, 59).toLocaleDateString('fr-CA')],
        cityId: '',
        filterType: 0
      },
      baseData: [],
      checkCitys:'',
      dialogVisible: false,
      dialogType: 'create',
      loading: false,
      city: [],
      tableColumn: [
        { prop: 'fupname', label: '一级分类' },
        { prop: 'fupcount', label: '' },
        { prop: 'fupzhanbi', label: '' }
      ]
    }
  },
  watch: {
    'listQuery.filterType'() {
      this.fetchData()
    }
  },
  computed: {
    // 获取所有单元格合并数据
    spanArr() {
      if (!this.tableColumn.length) return []
      const mergeCols = ['fupname', 'fupcount', 'fupzhanbi'] // 需要合并的列（字段）
      return getMergeCells(this.tableData, this.tableColumn, mergeCols)
    }
  },
  async created() {
    await this.getCityFilter()
    this.fetchData()
  },

  methods: {

    Tableheader({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'tableHeader'
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      return this.spanArr[rowIndex][columnIndex]
    },
    search() {
      this.fetchData()
    },
    getCityFilter() {
      let cityData = localStorage.getItem('citys_not_bind')
      if (!cityData) {
        getCity({ t: 1 }).then(response => {
          this.city = response.data.city
          localStorage.setItem('citys_not_bind', JSON.stringify(this.city))
        })
      } else {
        this.city = JSON.parse(cityData)
      }
    },
    refresh() {
      this.listQuery = {
        chart: 3,
        checktime: ''
      }
    },
    TypeName(t) {
      const ary = ['总表', '一级领域热点', '二级领域热点']
      return ary[t]
    },
    cityChange(){
      let citys = ''
      if (this.listQuery.cityId[0] > 0) {
        citys = this.$refs.tree.getCheckedNodes()[0].pathLabels.toString()
        for (let i = 0; i < citys.length; i++) {
          if (citys[i] === ',') {
            citys = citys.replace(citys[i], '')
          }
        }
        this.checkCitys = citys
      }else{
        this.checkCitys = ""
      }
    },
    explortExcel() {
      let citys = ''
      if(this.checkCitys){
        citys = '【'+this.checkCitys+'】'
      }
      let fileName = citys +'【' + (this.listQuery.checktime[0]) + '至' + (this.listQuery.checktime[1]) + '】' + this.TypeName(this.listQuery.filterType) + '的领域数据'
      exportExecl('table', fileName + '.xlsx')
    },
    fetchData() {
      this.listLoading = true
      this.tableData = []
      getLingyuData(this.listQuery).then(response => {
        this.listLoading = false
        this.tableData = response.data
      })
    }
  }
}
</script>
<style lang="less" scoped>
.lingyuData {
  padding-bottom: 20px;
  min-height: 500px;
  overflow: auto;
}
</style>

